<template>
  <div class="home">
    <div style="width: 1200px;margin:0 auto">
       <Login></Login>
       <filter-house></filter-house>
       <filter-list></filter-list>
       <Pagination :page="page" @changePage="changePage"></Pagination>
    </div>
  </div>
</template>

<script>
import { defineComponent ,computed, reactive, toRefs } from 'vue';
import FilterHouse from '@/components/filterHouse/index.vue'
import FilterList from '@/components/filterHouse/list.vue'
import Pagination from '@/components/pagination/index.vue'
import Login from '@/components/login/index.vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'Home',
  components: {
    FilterHouse,FilterList,Pagination,Login
  },
  setup() {
    const store = useStore() ;
    const isLogin = computed(() => store.state.isLogin)
    const data = reactive({
      page: {
        pageSize: 8,
        total: 100
      }
    })
    const handlerLogin = (bol,type) => {
      store.commit('handlerLogin',bol,type)
    }
    const changePage = (num) => {
      console.log(num)
    }
    return {
      ...toRefs(data),
      handlerLogin,
      changePage,
      isLogin
    }
  }
});
</script>
